<template>
  <div>
    <!-- 页面标题 -->
    <h2>上海元炘执药科技有限公司前端面试测试题</h2>
    <div>
      <!-- 功能1：动态表分页方式选择 -->
      <h3>功能1：动态表分页方式选择</h3>
      <div class="pagination-container">
        <span>每页显示的数据数量：</span>
        <!-- 下拉选择框，用于选择每页显示的数据数量 -->
        <el-select v-model="pageSize" size="mini" @change="handleSizeChange">
          <el-option label="10" value="10"></el-option>
          <el-option label="20" value="20"></el-option>
          <el-option label="50" value="50"></el-option>
        </el-select>
      </div>
      <!-- 功能2：以ID和baseBean为例，表头旁的两个小三角分别为顺序和倒序排序 -->
      <h3>功能2：以ID和baseBean为例，表头旁的两个小三角分别为顺序和倒序排序</h3>
      <!-- 功能3：以log2FoldChange为例，输入过滤要求（筛选出大于输入数值的当前页面的数据信息） -->
      <h3>功能3：以log2FoldChange为例，输入过滤要求（筛选出大于等于输入数值的当前页面数据信息）</h3>
      <!-- 输入框，用于设置log2FoldChange的阈值 -->
      <el-input v-model="thresholdValue" placeholder="Threshold for log2FoldChange" @input="handleThresholdChange"></el-input>
      <!-- 功能4：通过ID进行搜索 -->
      <h3>功能4：通过ID进行搜索</h3>
      <!-- 输入框，用于通过ID进行搜索 -->
      <el-input v-model="searchID" placeholder="Search by ID" @input="handleSearch"></el-input>
      <!-- 数据表格 -->
      <el-table :data="currentPageData" :default-sort="{ prop: sortColumn, order: sortOrder }" style="width: 100%">
        <!-- 表格列：ID -->
        <el-table-column label="ID" prop="ID" sortable >
        </el-table-column>
        <!-- 表格列：baseMean -->
        <el-table-column label="baseMean" prop="baseMean" sortable>
        </el-table-column>
        <!-- 表格列：log2FoldChange -->
        <el-table-column label="log2FoldChange" prop="log2FoldChange">
        </el-table-column>
        <!-- 表格列：lfcSE -->
        <el-table-column label="lfcSE" prop="lfcSE">
        </el-table-column>
        <!-- 表格列：stat -->
        <el-table-column label="stat" prop="stat">
        </el-table-column>
        <!-- 表格列：pvalue -->
        <el-table-column label="pvalue" prop="pvalue">
        </el-table-column>
        <!-- 表格列：padj -->
        <el-table-column label="padj" prop="padj">
        </el-table-column>
        <!-- 表格列：操作 -->
        <el-table-column>
          <template v-slot:scope="scope">
            <!-- 编辑按钮 -->
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
            <!-- 删除按钮 -->
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination :current-page="currentPage" :page-size="parseInt(pageSize, 10)" :total="filteredData.length" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <div>
      <h5>注：该项目使用了一个名为 `output.json` 的数据源文件，该数据文件是对笔试附件中 ront-end-dynamic-table.xlsx 的数据进行预处理后的结果，相关预处理代码在根目录下的 excelConverter.mjs 文件中，结果就是 output.json。</h5>
    </div>
  </div>
</template>

<script>
import data from './output.json';
export default {
  name: 'HelloWorld',
  data() {
    return {
      tableData: data,
      search: '',
      sortColumn: 'ID',
      sortOrder: 'ascending',
      currentPage: 1,
      pageSize: '10',
      searchID: '',
      thresholdValue: null,
    };
  },
  computed: {
    // 根据ID进行搜索过滤后的数据
    filteredData() {
      const searchID = this.searchID.toLowerCase();
      return this.tableData.filter((item) => {
        return item.ID.toString().toLowerCase().includes(searchID);
      });
    },
    // 根据阈值过滤后的数据
    filteredDataByThreshold() {
      const thresholdValue = parseFloat(this.thresholdValue);
      return this.filteredData.filter((item) => {
        const log2FoldChange = parseFloat(item.log2FoldChange);
        return isNaN(thresholdValue) || log2FoldChange > thresholdValue;
      });
    },
    // 当前页显示的数据
    currentPageData() {
      const startIndex = (this.currentPage - 1) * parseInt(this.pageSize, 10);
      const endIndex = startIndex + parseInt(this.pageSize, 10);
      return this.filteredDataByThreshold.slice(startIndex, endIndex);
    },
  },
  methods: {
    // 排序方法
    // sortMethod(a, b) {
    //   console.log(a, b);
    //   if (a.log2FoldChange == "NA" || b.log2FoldChange == "NA") {
    //     return -1;
    //   }
    //   return a.log2FoldChange > b.log2FoldChange ? 1 : -1;
    // },
    // 编辑行
    handleEdit(index, row) {
      console.log('Edit:', index, row);
    },
    // 删除行
    handleDelete(index, row) {
      console.log('Delete:', index, row);
    },
    // 改变每页显示的数据数量
    handleSizeChange() {
      this.currentPage = 1;
    },
    // 改变当前页码
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
    },
    // ID过滤方法
    filterID(value, row) {
      return row.ID === value;
    },
    // 过滤方法
    handleFilter() {
      this.currentPage = 1;
    },
    // 改变阈值
    handleThresholdChange() {
      this.currentPage = 1;
    },
  },
};
</script>

<style scoped>
.pagination-container {
  margin-top: 10px;
  margin-left: 0px;
}
</style>